<template>
  <div>
      <div class="banner">
          <img src="../assets/banner_01.png" alt="">
      </div>
      <!-- 商品详情 -->
      <div class="goods">
        <div class="title">
            <span></span>
            <p>热门推荐</p> 
        </div>
        <div class="list" v-for="(item,index) in info" :key="index">
            <ul>
                <a href="#"></a>
                <li>
                    <img :src="item.head_img" alt="">
                    <p>{{item.fish_name}}</p>
                </li>
                <li>
                    <p>{{item.introduce}}</p>
                    <span>￥{{item.value}}</span>
                </li>
                <li>
                    <p>已抢{{(item.surplus_count/item.stock*100).toFixed(2)}}%</p>
                   <van-progress
                    pivot-text=""
                    color="#f2826a"
                    :percentage="item.surplus_count/item.stock*100"
                    />
                    <span @click="buy(item.id)">立即开抢</span> 
                </li>
            </ul>
        </div>
        
      </div>
      <div class="space"></div>
      
  </div>
</template>

<script>
import api from "../axios/api"
export default {
    data(){
        return{
            info:[],
        }
    },
    mounted(){
        this.nominate()
    },
    methods:{
       nominate(){
           this.$post(api.nominate,).then(res=>{
        if(res.code == 0){
            this.$toast(res.msg)
            this.info = res.data
        }else{
            this.$toast(res.error)
        }
    })
       },
       buy(id){
        this.$router.push("buy"+ "?id="+id);
       }
    }
    
}
</script>

<style lang="less" scoped>
.space{
    height: 50px;
}
    .banner {
        img{
            width: 100%;
            height: 250px;
            background-size: 100%;
        }
    }
    .goods {
        width: 95%;
        margin: 0 auto;
        .title {
            display: flex;
            align-items: center;
            p{
                margin: 0;
                margin-left: 5px;
                font-size: 20px;
                font-weight: 600;
                color: #000;
            }
            span {
            display: inline-block;
            width: 6px;
            height: 22px;
            background-image:linear-gradient( 90deg, rgb(253,127,51) 0%, rgb(250,44,34) 99%);
            border-radius: 15px;
            }
        }
        
    }
    .list {
        width: 100%;
        margin: 0 auto;
        height: 100px;
        background-color: #fff;
        margin-top: 10px;
        ul{
            display: flex;
            justify-content: space-around;
            padding-top: 0px;
            width: 95%;
            height: 90px;
            margin: 0 auto;
            font-size: 12px;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: 2px 2px 8px #dcdcdc;
            a{
                background: url("../assets/hot.png") no-repeat;
                width: 10px;
                height: 15px;
                background-size: 100%;
                margin-top: 5px;
            }
            li {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                height: 80px;
                img {
                    width: 40px;
                    height: 30px;
                }
            }
            li:nth-child(2){
                width: 50px;
                p{
                    margin-top: 10px;
                    
                }
            } 
            li:nth-child(3) {
                margin-left: 20px;
                p{
                    font-size: 12px;
                    color: #7a7a7a;
                    width: 100%;
                }
                span{
                    margin-top: 10px;
                    font-size: 13px;
                    color: #ff6406;
                    font-weight: 600;
                }
                width: 120px;
            }
            li:nth-child(4) {
                width: 100px;
                p{
                    width: 100%;
                    margin-left: 20px;
                    color: #fa2c14;
                    font-weight: 600;
                }
                span{
                    width: 60px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 4px;
                    background-image: linear-gradient( 90deg, rgb(253,127,51) 0%, rgb(250,44,34) 99%);
                    color: #fff;
                    margin-left: 20px;
                }
            }
        }
    }

    .van-progress{
        width: 100px;
        margin-bottom: 10px;
    }
</style>